import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
class Child extends React.Component {
  constructor(porps) {
    super(porps);
    this.state = {
      text: "一只小小小小的🐏",
    };
    console.log("Child constructor");
  }
  componentDidMount() {
    console.log("Child componentDidMount");
  }
  // componentWillReceiveProps(nextProps) {
  //   console.log(nextProps, "Child componentWillReceiveProps");
  // }
  // componentWillUpdate(a, b) {
  //   console.log(a, b, "Child componentWillUpdate");
  // }
  componentDidUpdate(a, b) {
    console.log(a, b, "Child componentDidUpdate");
  }
  // componentWillMount() {
  //   console.log("Child componentWillMount");
  // }
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log(prevProps, prevState, "Child getSnapshotBeforeUpdate");
    return {};
  }
  render() {
    let { text } = this.state;
    return <div className="Child">{text}</div>;
  }
}
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      count: 0,
    };
    console.log("App constructor");
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1,
      });
    }, 1000);
  }
  componentWillMount() {
    console.log("App componentWillMount");
  }
  componentDidMount() {
    console.log("App componentDidMount");
  }
  render() {
    let { count } = this.state;
    return (
      <div className="App">
        <Child count={count} />
      </div>
    );
  }
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App name="job day02" />);
